class shopcar2 {
    constructor() {

        // 获取购物车信息
        this.getshxx()
        // 用事件委托给最大的绑定点击事件
        this.$('.list-item').addEventListener('click', this.wtsj)
        // 给全选按钮绑定点击事件
        this.$('#colcolcheck input').addEventListener('click', this.quanxuan)
        this.$('#btn-primary').addEventListener('click', this.jiesuan)
        this.ysdl()





    }
    // 右上角登录的点击事件
    ysdl = () => {
        let dl = this.$('#ysdl')
        // let zc = this.$('#zhuce')
        let name = localStorage.getItem('nickname')
        // console.log(name);
        // console.log(zc);
        if (name) {
            dl.innerHTML = name
            // zc.innerHTML = `<img src="../../html/课上代码/icon1.jpg" alt="" width='20px' height='20px'>`
        }
    }
    // 结算的点击事件
    jiesuan = () => {
        // 用一个变量保存this的指向
        let self = this
        // console.log('sss');
        // 弹出框
        let js = layer.confirm('是否结算', {
            title: '结算提示框'
        }, function () {
            // console.log('sss');
            // console.log(self);
            // console.log(self.$('.list-body'));
            // 遍历获取的节点数组
            self.$('.list-body').forEach((res) => {
                // console.log(res.querySelector('#col-check'));
                // console.log(res);
                // 在res指向没有变的时候给他赋值给变量保存下来
                let r = res;
                // 获取复选框
                let fxk = res.querySelector('#col-check')
                // console.log(fxk);
                // console.log(self.$('#col-check'));
                // 判断复选框为true 的时候
                if (fxk.checked) {
                    // console.log(r);
                    // console.log(r.dataset.id);
                    const AUTH_TOKEN = localStorage.getItem('token')
                    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
                    let res = axios.get('http://localhost:8888/cart/remove', {
                        params: {
                            id: localStorage.getItem('user_id'),
                            goodsId: r.dataset.id
                        }
                    }).then(() => {
                        // console.log(res1);
                        // 删除弹出框
                        layer.close(js);
                        // 因为在这里边的时候res的指向发生了变化，需要用外边保存的没有发生变化时的res
                        // 删除数据
                        r.remove()
                        // 刷新页面
                        location.reload()
                    })
                }
            })
        })
    }
    // 全选按钮的点击事件
    // 使用箭头函数，this指向实例化对象
    quanxuan = (eve) => {
        // console.log(this);
        // 点击全选的时候让每个单选按钮都选中
        // 获取事件源
        // console.log(eve.target);
        let sjy = eve.target
        // 用checked获取复选框的状态true或者false
        let zhuangtai = sjy.checked;
        // console.log(zhuangtai);
        // 把获取的状态传过去
        this.gsqx(zhuangtai)
        // 点击全选调用统计数量和价格的方法
        this.tongji()
    }
    // 让单选的状态跟随全选的状态，获取每一个单选框
    gsqx(status) {
        // 点击全选获取到了每一个单选框
        let self = this
        // console.log(this.$('#col-check'));
        // 遍历他们获取他们的状态设置跟随全选
        // 这里的if是因为当商品列表为1 的时候就不是一个数组了判断大于1才遍历
        if (this.$('#col-check').length > 1) {
            self.$('#col-check').forEach(inputs => {
                // console.log(input);
                // 把全选框的状态赋值给了单选框的状态
                inputs.checked = status
            })
        } else {
            self.$('#col-check').checked = status
        }

    }
    // 单选的实现
    danxuan() {
        // 因为this指向的问题，指向的是input在外边保存一下
        // 就是将this没有发生变化的时候保存一下
        // 遍历获取单选按钮，并绑定点击事件
        // console.log(111);
        // 这里的if是因为当商品列表为1 的时候就不是一个数组了判断大于1才遍历

        if (this.$('#col-check').length > 1) {
            this.$('#col-check').forEach(input => {
                // console.log(input);
                let self = this;
                // 给每一个input绑定点击事件
                input.onclick = function () {
                    // console.log(this.checked);
                    // 当有一个是false的时候就让全选也为false
                    if (!this.checked) {
                        // console.log(111);
                        // console.log(self.$('#colcolcheck input'));
                        self.$('#colcolcheck input').checked = false
                    }
                    // 点击单选，当单选为true的时候判断是否有其他的为false的，如果都为true全选就为true
                    if (this.checked) {
                        let status = self.dgxz()
                        // console.log(status);
                        self.$('#colcolcheck input').checked = status
                    }
                    self.tongji()

                }
            })
        } else {
            // 给每一个input绑定点击事件

            this.$('#col-check').onclick = () => {
                // let self = this
                this.$('#colcolcheck input').checked = this.$('#col-check').checked

                // console.log(this.$('#col-check').checked);
                let sum = 0
                let num = 0
                if (this.$('#col-check').checked) {
                    let div = this.$('#col-check').parentNode.parentNode
                    // console.log(div);
                    let shuliang = div.querySelector('.goods-num').value - 0
                    // console.log(shuliang);
                    let xiaoji = div.querySelector('#pre-info').innerHTML - 0;
                    // console.log(xiaoji);
                    sum += shuliang;
                    num += xiaoji;

                }
                num = parseInt(num * 100) / 100;
                // 将数量和价格添加到页面
                this.$('.cart-total i').innerHTML = sum
                this.$('.total-price em').innerHTML = num


            }

        }


    }
    // 获取单个商品的选中状态
    dgxz() {
        let res = Array.from(this.$('#col-check')).find(input => {
            return !input.checked
        })
        return !res
    }
    // 统计数量和价格的方法
    tongji() {
        let sum = 0
        let num = 0
        let self = this
        // 这里的if是因为当商品列表为1 的时候就不是一个数组了判断大于1才遍历

        if (this.$('#col-check').length > 1) {
            self.$('#col-check').forEach(input => {
                // console.log(input);
                // 通过input.checkbox找到div
                // 判断选中的
                // console.log(input.checked);

                if (input.checked) {
                    let div = input.parentNode.parentNode
                    // console.log(div);
                    // 获取数量和总计.
                    let shuliang = div.querySelector('.goods-num').value - 0;
                    let xiaoji = div.querySelector('#pre-info').innerHTML - 0;
                    // console.log(shuliang, xiaoji);
                    sum += shuliang;
                    num += xiaoji;
                }
            })
        } else {
            // console.log(this.$('#col-check').checked);
            // console.log(this.$('#col-check').parentNode.parentNode);
            // let div = this.$('#col-check').checked
            // console.log(div);

            if (this.$('#col-check').checked) {
                // console.log(this.$('#col-check').parentNode.parentNode);
                let div = this.$('#col-check').parentNode.parentNode
                let shuliang = div.querySelector('.goods-num').value - 0
                // console.log(shuliang);
                let xiaoji = div.querySelector('#pre-info').innerHTML - 0;
                // console.log(xiaoji);
                sum += shuliang;
                num += xiaoji;
            }
        }
        // console.log(sum, num);
        // 保留小数点后两位
        num = parseInt(num * 100) / 100;
        // 将数量和价格添加到页面
        this.$('.cart-total i').innerHTML = sum
        this.$('.total-price em').innerHTML = num
    }
    // 委托事件的点击方法，用箭头函数
    wtsj = (eve) => {
        // console.log(this);
        // console.log(eve.target.nodeName);
        let tar = eve.target
        // 获取事件源，根据事件源上的class名字判断点击的是删除的按钮
        if (tar.nodeName == 'I' && tar.id == 'iconfont') this.shanchu(tar)
        // 判断当前操作的是否是加号
        if (tar.nodeName == 'I' && tar.id == 'jiahao') this.jiahao(tar)
        if (tar.nodeName == 'I' && tar.id == 'jian') this.jian(tar)

    }
    // 数量增加的方法
    jiahao = (tar) => {
        // console.log(tar);
        // 点击加号让数量增加
        // 获取数量
        let div = tar.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
        // console.log(div);
        let shuliang = div.querySelector('.goods-num')
        // console.log(shuliang);
        let xiaoji = div.querySelector('#pre-info');
        // console.log(xiaoji);
        let danjia = div.querySelector('#jiajia').innerHTML - 0;
        console.log(danjia);
        // 获取数量
        let sl = shuliang.value - 0
        // 点击一次让数量加一
        sl++;
        // console.log(shuliang);
        // 发动请求，设置上去
        const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        let yonghuid = localStorage.getItem('user_id')
        let gId = div.dataset.id
        // console.log(gId);
        let param = `id=${yonghuid}&goodsId=${gId}&number=${sl}`
        // console.log(param);
        axios.post('http://localhost:8888/cart/number', param).then(res => {
            // console.log(res);
            let { status, data } = res
            if (status == 200 && data.code == 1) {
                // 将更新的数量设置到原来的数量的value中
                shuliang.value = sl;
                xiaoji.innerHTML = parseInt((sl * danjia) * 100) / 100;
                this.tongji()
            }
        })


    }
    jian = (tar) => {
        // console.log(tar);
        // 点击加号让数量增加
        // 获取数量
        let div = tar.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
        // console.log(div);
        let shuliang = div.querySelector('.goods-num')
        // console.log(shuliang);
        let xiaoji = div.querySelector('#pre-info');
        // console.log(xiaoji);
        let danjia = div.querySelector('#jiajia').innerHTML - 0;
        // console.log(danjia);
        // 获取数量
        let sl = shuliang.value - 0
        // 点击一次让数量减一
        sl--;
        // console.log(shuliang);
        // 发动请求，设置上去
        const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        let yonghuid = localStorage.getItem('user_id')
        let gId = div.dataset.id
        // console.log(gId);
        let param = `id=${yonghuid}&goodsId=${gId}&number=${sl}`
        // console.log(param);
        axios.post('http://localhost:8888/cart/number', param).then(res => {
            // console.log(res);
            let { status, data } = res
            if (status == 200 && data.code == 1) {
                // 将更新的数量设置到原来的数量的value中
                shuliang.value = sl;
                xiaoji.innerHTML = parseInt((sl * danjia) * 100) / 100;
                this.tongji()
            }
        })
    }
    // 删除购物车的列表的方法
    // 找接口文档中，删除需要获取商品id和用户id
    // 用户id在后台存放通过点击删除获取其父节点获取商品id
    shanchu(tar) {
        // console.log(tar);
        // console.log(tar.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
        // let id = tar.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.dataset.id
        // console.log(id);
        // 点击出现弹出框，询问是否删除
        let index = layer.confirm('是否删除', {
            title: '删除提示框'
        }, function () {
            // console.log(111);
            // 点击确认给后台发送数据删除记录
            let div = tar.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
            let spid = div.dataset.id
            let yhid = localStorage.getItem('user_id')
            // console.log(spid, yhid);
            // 发送请求
            const AUTH_TOKEN = localStorage.getItem('token')
            axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
            // let param = `id=${spid}&goodsId=${yhid}`
            axios.get('http://localhost:8888/cart/remove', {
                params: {
                    id: yhid,
                    goodsId: spid
                }
            }).then(res => {
                // console.log(res);
                // 直接刷新页面
                // location.reload()
                // 无刷新删除  关闭弹出框并且删除对应的数据
                // index就是这个弹出框的返回值
                layer.close(index);
                // 或者，删除所有弹出框
                // layer.closeAll()
                div.remove()
                // 刷新页面
                // location.reload()
            })
        })
    }
    // 取出用户加入购物车之后的商品信息的方法
    async getshxx() {
        // 发送请求必须携带token
        const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        let res = await axios.get('http://localhost:8888/cart/list', {
            params: {
                id: localStorage.getItem('user_id')
            }
        })
        // console.log(res);
        let { data, status } = res
        // console.log(data, status);
        // 结构赋值获取data, status
        // 判断两个值的状态
        if (status == 200 && data.code == 1) {
            // 当axios状态正常就获取cart  
            // console.log(data.cart);
            // 追加到页面
            let html = ''
            data.cart.forEach(ele => {
                // console.log(this);
                // console.log(ele);
                html += `<div data-v-33432b6e="" class="list-body" data-id="${ele.goods_id}">
                <div data-v-33432b6e="" class="list-ite">
                    <div data-v-33432b6e="" class="item-box">
                        <div data-v-33432b6e="" class="item-table">
                            <div data-v-33432b6e="" class="item-row clearfix" >
                                <div data-v-33432b6e="" class="col col-check"><input data-v-33432b6e="" type="checkbox"
                                        class="iconfont icon-checkbox icon-checkbox-selected" id="col-check"></input>
                                </div>
                                <div data-v-33432b6e="" class="col col-img"><a data-v-33432b6e=""
                                        href="javascript:void(0)"><img data-v-33432b6e="" alt=""
                                            src="${ele.img_small_logo}"
                                            width="80" height="80"></a></div>
                                <div data-v-33432b6e="" class="col col-name">
                                    <div data-v-33432b6e="" class="tags">
                                    </div>
                                    <h3 data-v-33432b6e="" class="name"><a data-v-33432b6e=""
                                            href="javascript:void(0)">${ele.title}</a></h3>
                                </div>
                                <div data-v-33432b6e="" class="col col-price"><p data-v-33432b6e=""
                                        class="pre-info" id="jiajia">${ele.current_price}
                                    </p>
                                </div>
                                <div data-v-33432b6e="" class="col col-num">
                                    <div data-v-33432b6e="" class="change-goods-num clearfix"><a
                                            data-v-33432b6e="" href="javascript:void(0)"><i
                                                data-v-33432b6e="" class="iconfont" id="jian"></i></a>
                                                <input data-v-33432b6e="" type="text" value="${ele.cart_number}" autocomplete="off"
                                            class="goods-num">  <a data-v-33432b6e=""
                                            href="javascript:void(0)"><i data-v-33432b6e=""
                                                class="iconfont" id="jiahao"></i></a>
                                    </div>
                                </div>
                                <div data-v-33432b6e="" class="col col-total"><p data-v-33432b6e=""
                                        class="pre-info" id="pre-info">${ele.current_price * ele.cart_number}
                                    </p>
                                </div>
                                <div data-v-33432b6e="" class="col col-action"><a data-v-33432b6e=""
                                        href="javascript:void(0);" title="删除" class="del"><i
                                            data-v-33432b6e="" class="iconfont " id="iconfont"></i></a>
                                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`
            });
            // console.log(this.$('.list-item'));
            this.$('.list-item').innerHTML += html;

            // 单选按钮的事件绑定,是因为同步异步的问题，单个商品的追加是异步执行的，放到上边就成了同步了
            this.danxuan()
        }

        // 登录过期的处理
        if (data.code == 401 && status == 200) {

            // 登录超时就清除保存的值
            localStorage.removeItem('token')
            localStorage.removeItem('user_id')

            // 跳转到购物车当登录后跳转到本页面
            location.assign('./login.html?ReturnUrl=./shopcar2.html')
        }

    }
    // 封装节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res;
    }
}
new shopcar2